import React, { Component } from 'react';
/*
  学习目标：Props深入-学习children属性-类似VUe的插槽
  children：
    1. 代表的是组件标签夹着的内容
    2. children也可以是任意的数据类型
      2.1 字符串、数字、null 、boolean undefined
      2.2 数组、对象、JSX
      2.2 🔔函数
*/
export default class App extends Component {
  render() {
    return (
      <div>
        {/* <Child msg="hello React">线上React</Child> */}
        {/* 数字、null 、boolean undefined */}
        {/* <Child msg="hello React">{71}</Child> */}
        {/* <Child msg="hello React">{null}</Child>
        <Child msg="hello React">{false}</Child>
        <Child msg="hello React">{undefined}</Child> */}

        {/* 数组、对象 JSX */}
        {/* <Child msg="hello React">{[1, 2, 3]}</Child> */}
        {/* <Child msg="hello React">{{ name: 'zs' }}</Child> */}

        {/* JSX */}
        {/* <Child msg="hello React">
          <b>我是JSX</b>
        </Child> */}

        {/* 🔔 children是函数 */}
        <Child msg="hello React">{() => <i>我是React</i>}</Child>
      </div>
    );
  }
}

class Child extends React.Component {
  render() {
    const { children } = this.props;
    return (
      <div>
        <h1>Child</h1>
        <h1>{children}</h1>
      </div>
    );
  }
}

// Props.children指的是什么东西？
// 指的是组件标签夹着的内容
// 类似Vue中的？ 插槽

// props可以是任意数据类型

// children的数据类型可以是什么类型？
